<template>
  <div
    class="modularWrapper"
    :style="{ width: width, height: height }"
    @mouseover="clearTime"
    @focus="clearTime"
    @mouseout="setTime"
    @focusout="setTime"
  >
    <div class="titleWrapper" v-if="titleList.length > 0"
         :class="{ titleC: type === '2' }">
      <div class="titleList"
           v-if="titleList.length > 0">
        <div
          class="titleListItem"
          v-for="(e, i) in titleList"
          :key="i"
          @click="nodeClick(e)"
          @keydown="()=>{}"
        >
          {{ e.label }}
          <span>{{ e.txt}}</span>
        </div>
      </div>
      <div class="titleMove">
        <slot name="move"></slot>
      </div>
    </div>
    <div class="bodyWrapper">
      <slot name="body"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'modularWrapper',
  props: {
    value: {
      type: String,
      default: '1',
    },
    titleList: {
      type: Array,
      default: () => [],
    },
    type: {
      type: String,
      default: '1',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '100%',
    },
  },
  data() {
    return {
      time: null,
      index: 0,
      isInterval: false,
    };
  },
  watch: {
    titleList: {
      immediate: true,
      handler(val) {
        if (val.length > 1) {
          this.setTime();
        }
      },
    },
  },
  destroyed() {
    this.clearTime();
  },
  methods: {
    nodeClick(e) {
      // this.$emit('input', e.value);
    },
    clearTime() {
      clearInterval(this.time);
      this.time = null;
    },
    setTime() {
      clearInterval(this.time);
      this.time = null;
      this.time = setInterval(() => {
        this.index += 1;
        if (this.index > this.titleList.length - 1) {
          this.index = 0;
        }
        this.nodeClick(this.titleList[this.index]);
      }, 1000 * 10);
    },
  },
};
</script>

<style scoped lang="scss">
.modularWrapper {
  display: flex;
  flex-direction: column;
  border: 2px solid #fff;
  border-radius: 20px;
  background: hsla(0,0%,100%,.82)!important;
  box-shadow: 1px 1px 0 rgba(81, 146, 244, 0.15),inset 0 5px 5px 0 rgba(92, 172, 246, 0.15)!important;
  backdrop-filter: blur(20px);
  margin-top: 0.052083rem;
  .titleWrapper {
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    justify-content: space-between;
    // margin-bottom: 10px;
    // background: #fff;
    // background: url("~@/assets/home/titleBg.png") no-repeat;
    // background-position: left center;
    // background-size: contain;
    background: url("~@/assets/home/light.png") no-repeat;
    background-position: left center;
    .titleList {
      display: flex;
      margin-left: 30px;
    //rgb(10 40 95 / 69%)
      .titleListItem {
        font-size: 16px;
        font-weight: bold;
        background: linear-gradient(to bottom, #21b5ff, #3c3f41);
        -webkit-background-clip: text;
        color: transparent;
        //text-shadow: 5px 5px 5px rgba(10, 40, 95, 0.69);
        span {
          font-size: 14px;
        }
      }
    }
    &.titleC {
      justify-content: center;
    }
  }
  .titleMove {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .bodyWrapper {
    //height: calc(100% - 58px);
    overflow: hidden;
  }
}
</style>
